<template>
  <div>
    <div class="threeBarChart" :id="id"></div>
  </div>
</template>

<script>
export default {
  name: 'TurNover',
  data () {
    return {
      id: 'main',
      dataLists: [],
      month: {
        January: 0,
        February: 0,
        March: 0,
        April: 0,
        May: 0,
        June: 0,
        July: 0,
        August: 0,
        September: 0,
        October: 0,
        November: 0,
        December: 0
      },
      titleColor: true
    }
  },
  methods: {
    async dataList () {
      const { data: res } = await this.$http.get('busiList')
      this.dataLists = res.data
      // console.log(this.dataLists)
      // eslint-disable-next-line array-callback-return
      this.dataLists.forEach(item => {
        const numDate = Number(item.data_business.substring(5, 7))
        const numNum = Number(item.money_business)
        if (numDate === 1) {
          this.month.January += numNum
        } else if (numDate === 2) {
          this.month.February += numNum
        } else if (numDate === 3) {
          this.month.March += numNum
        } else if (numDate === 4) {
          this.month.April += numNum
        } else if (numDate === 5) {
          this.month.May += numNum
        } else if (numDate === 6) {
          this.month.June += numNum
        } else if (numDate === 7) {
          this.month.July += numNum
        } else if (numDate === 8) {
          this.month.August += numNum
        } else if (numDate === 9) {
          this.month.September += numNum
        } else if (numDate === 10) {
          this.month.October += numNum
        } else if (numDate === 11) {
          this.month.November += numNum
        } else {
          this.month.December += numNum
        }
      })
      this.myChart()
    },
    myChart () {
      const arrays = Object.values(this.month)
      // 获取节点
      const myChart = this.$echarts.init(document.getElementById(this.id))
      // 获取到当前容器的的宽高而后赋值加载至图列节点中从而达到自适应容器大小
      myChart.resize(
        {
          width: document.getElementById(this.id).offsetWidth,
          height: document.getElementById(this.id).offsetHeight
        }
      )
      // 配置项
      const option = {
        // title: {
        //   left: 'center',
        //   text: '月收入'
        // },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            // name: 'Email',
            type: 'line',
            stack: 'Total',
            color: 'green',
            data: arrays
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  },
  created () {
    this.bus.$emit('titleColor', this.titleColor)
    this.dataList()
  }
}
</script>

<style scoped lang='scss'>
.threeBarChart {
  height: calc(100vh - 200px);
}
</style>
